import SearchForm from "./components/search";
import { Table, Card, Tag } from "antd";
import { useState } from "react";
import type { TableProps } from "antd";
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  birthday: string;
  gender: string;
}

export default function TablePage() {
  // 处理搜索
  const handleSearch = (values: { name: string }) => {
    console.log("搜索条件:", values);
    // 在这里实现搜索逻辑，比如调用 API 或过滤数据
  };

  // 处理重置
  const handleReset = () => {
    console.log("重置搜索条件");
    // 在这里实现重置逻辑，比如恢复默认数据
  };
  const [dataSource, setDataSource] = useState(() => {
    return [
      {
        key: "1",
        name: "John",
        age: 30,
        gender: "男",
        address: "123 Main St",
        birthday: "1990-01-01",
      },
      {
        key: "2",
        name: "Jane",
        age: 25,
        gender: "女",
        address: "456 Elm St",
        birthday: "1995-05-15",
      },
      {
        key: "3",
        name: "Tom",
        age: 35,
        gender: "男",
        address: "789 Oak St",
        birthday: "1995-05-15",
      },
      {
        key: "4",
        name: "Lucy",
        age: 28,
        gender: "女",
        address: "101 Pine St",
        birthday: "1995-05-15",
      },
      {
        key: "5",
        name: "Mike",
        age: 32,
        gender: "男",
        address: "202 Maple St",
        birthday: "1995-05-15",
      },
      {
        key: "6",
        name: "Sara",
        age: 27,
        gender: "女",
        address: "303 Cedar St",
        birthday: "1995-05-15",
      },
      {
        key: "7",
        name: "David",
        age: 31,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "8",
        name: "Emily",
        age: 29,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "9",
        name: "Chris",
        age: 33,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "10",
        name: "Olivia",
        age: 26,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "11",
        name: "Jack",
        age: 34,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "12",
        name: "Sophia",
        age: 24,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "13",
        name: "Daniel",
        age: 30,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "14",
        name: "Emma",
        age: 28,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "15",
        name: "Matthew",
        age: 32,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "16",
        name: "Isabella",
        age: 26,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "17",
        name: "Andrew",
        age: 31,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "18",
        name: "Mia",
        age: 29,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "19",
        name: "James",
        age: 33,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "20",
        name: "Charlotte",
        age: 27,
        gender: "女",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
      {
        key: "21",
        name: "Benjamin",
        age: 30,
        gender: "男",
        address: "404 Birch St",
        birthday: "1995-05-15",
      },
    ];
  });
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1, // 当前页码
    pageSize: 20, // 每页条数
    total: 0, // 总条数
  });

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "序号",
      dataIndex: "key",
      key: "key",
      width: 80,
      fixed: "left",
      render: (text, record, index) =>
        (pagination.current - 1) * pagination.pageSize + index + 1,
    },
    { title: "姓名", dataIndex: "name" },
    { title: "年龄", dataIndex: "age" },
    {
      title: "性别",
      dataIndex: "gender",
      render: (_, { gender }) => (
        <Tag color={gender == '男' ? 'red' : 'blue'}>
          {gender}
        </Tag>
      ),
    },
    { title: "地址", dataIndex: "address" },
    { title: "生日", dataIndex: "birthday" },
  ];
  // 获取数据
  const fetchData = async (page: number, pageSize: number) => {
    setLoading(true);
    try {
      setTimeout(() => {
        setPagination({
          ...pagination,
          current: page,
          pageSize,
          total: dataSource.length, // 更新总条数
        });
      }, 1000);
    } catch (error) {
      console.error("获取数据失败:", error);
    } finally {
      setLoading(false);
    }
  };
  // 分页变化
  const handlePageChange = (page: number, pageSize: number) => {
    fetchData(page, pageSize); // 调用 API 获取数据
  };

  return (
    <div>
      <SearchForm onSearch={handleSearch} onReset={handleReset} />
      <Card>
        <Table
          columns={columns}
          rowKey="key"
          bordered
          size="middle"
          scroll={{ x: 1300, y: "calc(100vh - 400px)" }}
          dataSource={dataSource}
          pagination={{
            ...pagination,
            showSizeChanger: true,
            pageSizeOptions: [10, 20, 30],
            onChange: handlePageChange,
            showTotal: (total) => `共 ${total} 条`,
          }}
          loading={loading} // 显示加载状态
        />
      </Card>
    </div>
  );
}
